<template>
  <div class="aniu">
    <el-button type="primary" :icon="Calendar" class="icon"> </el-button>
    <div class="ziti">
      <router-link to="/homepage">发现</router-link>
      <router-link to="/channel">频道</router-link>
      <router-link to="/my">我的</router-link>
      <router-view />
    </div>
    <div>
      <el-input
        v-if="searchMovies"
        v-model="searchQuery"
        placeholder="请输入电影名称"
        @blur="handelBlur"
        @search="handleSearch"
      ></el-input>
      <el-button
        type="primary"
        :icon="Search"
        class="icon"
        @cilck="searchMovies = true"
      >
      </el-button>
      <div v-if="searchResults && searchResults.length > 0">
        <h2>搜索结果：</h2>
        <ul>
          <li v-for="movie in searchResults" :key="movie.id">
            {{ movie.title }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Calendar, Search } from "@element-plus/icons";
import { ElButton, ElInput } from "element-plus";
import { ref } from "vue";

// 搜索响应式状态
const searchMovies = ref(false);
const searchQuery = ref("");
const searchResults = ref([]);

// 处理搜索失去焦点事件
const handelBlur = () => {
  showSearch.value = false;
};

const handleSearch = () => {
  searchMovies(searchQuery.value);
  console.log("搜索电影：", searchQuery.value);
  showSearch.value = false;
};
</script>
<style>
.aniu {
  background-color: rgb(0, 0, 0);
  height: 45px;
  width: 100%;
  padding: 0 10px 0 10px;
  border-style: none;
  top: 100px;
  left: 0;
  border-style: none;
  padding-left: 10px;
  font-size: 20px;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
}
.icon {
  background-color: transparent !important;
  border-style: none !important;
  font-size: 20px !important;
}
.ziti {
  align-items: center;
  text-align: center;
  justify-content: center;
}
</style>
